<template>
    <div class="linel">
        <div id="linel" class="" style="width:90%;height:450px"></div>
    </div>
</template>
<script>
// import echarts from "echarts/lib/echarts"; 
// import "echarts/lib/chart/bar";           //引入柱状图
// import "echarts/lib/chart/line";          //引入折线图
// import "echarts/lib/component/title";   // 引入提示框组件、标题组件、工具箱组件。
// import "echarts/lib/component/legend";
// import "echarts/lib/component/toolbox";
// import "echarts/lib/component/markPoint";
// import "echarts/lib/component/tooltip";

//vuecli脚手架也支持  node 中的模块化  common 规范   一般写代码用ES6的模块化( import )
var echarts=require("echarts/lib/echarts");             //引入 echarts 主模块 
            require("echarts/lib/chart/bar");           //引入柱状图
            require("echarts/lib/chart/line");           //引入折线图
            require("echarts/lib/chart/pie");           //引入饼状图
            require("echarts/lib/component/title");     //引入柱状图
            require("echarts/lib/component/legend");   // 引入提示框组件、标题组件、工具箱组件。
            require("echarts/lib/component/toolbox");   
            require("echarts/lib/component/markPoint");     
            require("echarts/lib/component/tooltip");   
   export default {
        name:'echarts',
        methods:{
            initData(){
                const colors=["#5793f3","#675bba","#d14a61"]
                const option={
                    color:colors,
                    title: {
                        text: '走势图',
                        subtext:""
                    },
                    tooltip: {
                        trigger:"axis"
                    },
                    legend: {
                        data:['新注册用户','新增订单','新增管理员']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {readOnly: false},
                            magicType: {type: ['line', 'bar']},
                            restore: {},
                            // saveAsImage: {}
                        }
                    },
                    xAxis:  {
                        type: 'category',
                        boundaryGap: false,
                        data: ['2019-11-30','2019-12-01','2019-12-02','2019-12-03','2019-12-04','2019-12-05','2019-12-06']
                    },
                    yAxis: [
                        {
                            type:"value",
                            name:"用户",
                            min:0,
                            max:200,
                            position:"left",
                            axisLine:{
                                lineStyle:{
                                    color:"#999"
                                }
                            },
                            axisLabel:{
                                formatter:"{value}"
                            }
                        },
                        {
                            type:"value",
                            name:"订单",
                            min:0,
                            max:200,
                            position:"right",
                            axisLine:{
                                lineStyle:{
                                    color:"#999"
                                }
                            },
                            axisLabel:{
                                formatter:"{value}"
                            }
                        }
                    ],
                   series: [
                        {
                            name:'新注册用户',
                            type:'line',
                            data:[0, 100, 50, 150, 200, 175, 150],
                            yAxisIndex:1,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                        },
                        {
                            name:'新增订单',
                            type:'line',
                            data:[50, 150, 100, 150, 200, 100, 150],
                            yAxisIndex:1,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                        },
                        {
                            name:'新增管理员',
                            type:'line',
                            data:[100, 50, 200, 150, 100, 175, 50],
                            yAxisIndex:1,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                        }
                    ]
                }
                this.myChart.setOption(option);
            }
        },
        mounted(){
            this.myChart=echarts.init(document.getElementById("linel"));
            this.initData();
        },
        data() {
            return {

            };
        },
   };
</script>
<style lang="scss" scoped>
.linel{
    display: flex;
    justify-content: center;
    background: gainsboro;
}
</style>